<template>
  <div class="main-header">
    <div style="margin-right:10px;">
      <el-form :model="APIform" ref="authorizationInformation" label-width="40%">
        <el-row :gutter="24" >
          <p class="title" style="margin-left:20px;font-size: 14px;margin-top: -10px;">GPT</p>
          <el-form-item label="基础URL:" label-width="100px">
            <el-input v-model="APIform.BaseUrl" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="令牌:" label-width="100px">
            <el-input v-model="APIform.ApiKey" oninput="value=value.replace(/[^0-9a-zA-Z-.]/g,'')" ref="GPTinputRef">
              <el-button slot="append" icon="el-icon-document-copy" @click="copy('GPTinputRef')" title="复制令牌"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="是否加速:" label-width="120px">
            <el-switch v-model="APIform.HttpProxy" :inactive-value="0" :active-value="1"></el-switch>
            <el-tooltip class="item" effect="dark" content="若加速服务器正常配置，此操作可以略微加快AI的响应速度" placement="top-start">
              <i class="el-icon-warning" style="color:#F56C6C;margin-left:10px;cursor: pointer;"></i>
            </el-tooltip>
          </el-form-item>
          <p class="title" style="margin-left:20px;font-size: 14px;">豆包</p>
          <el-form-item label="基础URL:" label-width="100px">
            <el-input v-model="APIform.DoubaoBaseUrl" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="令牌:" label-width="100px">
            <el-input v-model="APIform.DoubaoApiKey" oninput="value=value.replace(/[^0-9a-zA-Z-.]/g,'')" ref="DoubaoinputRef">
              <el-button slot="append" icon="el-icon-document-copy" @click="copy('DoubaoinputRef')" title="复制令牌"></el-button>
            </el-input>
          </el-form-item>
          <p class="title" style="margin-left:20px;font-size: 14px;">Deepseek</p>
          <el-form-item label="基础URL:" label-width="100px">
            <el-input v-model="APIform.DeepseekBaseUrl" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="令牌:" label-width="100px">
            <el-input v-model="APIform.DeepseekApiKey" oninput="value=value.replace(/[^0-9a-zA-Z-.]/g,'')" ref="DeepseekinputRef">
              <el-button slot="append" icon="el-icon-document-copy" @click="copy('DeepseekinputRef')" title="复制令牌"></el-button>
            </el-input>
          </el-form-item>
          <!-- <p class="title" style="margin-left:20px;font-size: 14px;">DeepSeek</p>
            <el-form-item label="令牌:" label-width="100px">
              <el-input v-model="APIform.ApiKey" oninput="value=value.replace(/[^0-9a-zA-Z-.]/g,'')" ref="inputRef">
                <el-button slot="append" icon="el-icon-document-copy" @click="copy" title="复制令牌"></el-button>
              </el-input>
            </el-form-item> -->
          <div style="display:flex;align-item:center;margin-top:15px;justify-content: flex-end;">
            <div>
              <el-button type="primary" title="导入授权文件" @click="saveAPI()">保存API配置</el-button>
            </div>
          </div>
        </el-row>
      </el-form>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage"
import { getToken } from '@/utils/auth' // get token from cookie
export default {
  data() {
    return {
      APIform: {},
      applicationCode: '',
      authorizationCode: ''
    }
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取邮件列表数据
    async getData() {
      const res = await connrequest('GetAIConnParam');
      if (res.Status.StatusCode === 0) {
        this.APIform = { ...res.Data }
      }
    },
    async saveAPI() {
      this.$confirm('确定保存API配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data: {
            BaseUrl: this.APIform.BaseUrl,
            ApiKey: this.APIform.ApiKey,
            HttpProxy: this.APIform.HttpProxy,
            DoubaoBaseUrl: this.APIform.DoubaoBaseUrl,
            DoubaoApiKey: this.APIform.DoubaoApiKey,
            DeepseekBaseUrl: this.APIform.DeepseekBaseUrl,
            DeepseekApiKey: this.APIform.DeepseekApiKey
          }
        }
        const res = await connrequest('SetAIConnParam', data)
        if (res.Status.StatusCode === 0) {
          this.$message.success('保存成功')
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    copy(ref) {
      // 选择输入框中的内容
      this.$refs[ref].select();
      // 复制选定的文本到剪贴板
      document.execCommand('copy');
      // 取消选择文本
      window.getSelection().removeAllRanges();
      this.$message.success('复制成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.box-card {
  // margin: 16px;
  margin-bottom: 16px !important;
}

.cardHeard {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-input--small {
  width: 40% !important;
}

::v-deep .el-card__header {
  padding: 10px !important;
}

.el-form-item {
  margin-bottom: 10px !important;
}

::v-deep .el-form-item__error {
  padding-top: 0 !important;
}
.el-row{
  margin-left:0 !important;
}
.night{
  .input-item .parameType .title{
    border-bottom:1px solid #3f4456;
  }
  .el-row{
    background: #363b4d !important;
  }
}
</style>
